<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/page/layout/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<h:outputStylesheet>
a.no-decor>img {
    border: none;
}
</h:outputStylesheet>

	<ui:define name="title">Informe CLientes</ui:define>

	<ui:define name="content">

		<h:form id="form">
			<rich:dataTable value="#{informeClienteView.clientes}" var="cliente"
				iterationStatusVar="it" id="table" rows="15">
				<rich:column>
					<f:facet name="header">#</f:facet>#{it.index+1}</rich:column>
				<rich:column>
					<f:facet name="header">Cliente Codigo</f:facet>
					<h:outputText value="#{cliente.clienteId}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Cliente Nombre</f:facet>
					<h:outputText value="#{cliente.clienteNombre}" />
				</rich:column>
				<rich:column sortBy="#{cliente.cantidadDeOperaciones}"
					id="cantidadDeOperaciones"
					sortOrder="#{informeClienteView.cantidadOperacionesOrder}">
					<f:facet name="header">
						<a4j:commandLink value="Cantidad De Operaciones" render="table"
							action="#{informeClienteView.ordenarPorCantidadDeOperaciones}" />
					</f:facet>
					<h:outputText value="#{cliente.cantidadDeOperaciones}" />
				</rich:column>
				<rich:column sortBy="#{cliente.importeTotal}" id="importeTotal"
					sortOrder="#{informeClienteView.importeTotalOrder}">
					<f:facet name="header">
						<a4j:commandLink value="Ingresos Aportados" render="table"
							action="#{informeClienteView.ordenarPorImporteTotal}" />
					</f:facet>
					<h:outputText value="#{cliente.importeTotal}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">Datos</f:facet>
					<a4j:commandLink styleClass="no-decor" render="table"
						execute="@this"
						oncomplete="#{rich:component('verDatosPanel')}.show()">
						<a4j:param value="#{cliente.clienteId}"
							assignTo="#{informeClienteView.currentClienteId}" />
						<a4j:param value="#{cliente.clienteNombre}"
							assignTo="#{informeClienteView.currentClienteNombre}" />
						<f:setPropertyActionListener
							target="#{informeClienteView.clientesPeriodo}"
							value="#{informeClienteView.obtenerClientesPeriodo}" />
						<h:graphicImage library="img/icons" name="zoom.png" alt="buscar" />
						<h:outputText value="+ Info" />
					</a4j:commandLink>
				</rich:column>
			</rich:dataTable>
			<rich:popupPanel header="Detalle" id="verDatosPanel"
				domElementAttachment="parent" autosized="true">
				<h:outputText value="Cliente:  " /><h:outputText value="#{informeClienteView.currentClienteId}" />
				<br/>
				<h:outputText value="Nombre:  " /><h:outputText value="#{informeClienteView.currentClienteNombre}" />
				<br/>
				<br/>
				<rich:dataTable value="#{informeClienteView.clientesPeriodo}"
					var="clientePeriodo" iterationStatusVar="it" id="table2" rows="15">
					<rich:column><f:facet name="header">#</f:facet>#{it.index+1}</rich:column>
					<rich:column>
						<f:facet name="header">Periodo</f:facet>
						<h:outputText value="#{clientePeriodo.periodoOperacion}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">Cantidad Operaciones</f:facet>
						<h:outputText value="#{clientePeriodo.cantMesOperacion}" />
					</rich:column>
				</rich:dataTable>
				<a4j:commandLink styleClass="no-decor" execute="@this" render="form"
					oncomplete="#{rich:component('verDatosPanel')}.hide()">
					<h:outputText value="Salir" />
				</a4j:commandLink>
			</rich:popupPanel>
		</h:form>



	</ui:define>
</ui:composition>
